<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>知识管理</el-breadcrumb-item>
			<el-breadcrumb-item>音乐管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索区域 -->
		<el-row>
			<el-form :inline="true">
				<el-form-item label="音乐名称">
					<el-input v-model="queryInfo.name" clearable @clear="queryList" placeholder="请输入音乐名称"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryList">搜索</el-button>
					<el-button type="success" icon="el-icon-plus" @click="toAddMusic">新增音乐</el-button>
				</el-form-item>
			</el-form>
		</el-row>
		<!-- 表格区域 -->
		<el-table :data="fmList" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }">
			<el-table-column width="80px" prop="id" label="ID"></el-table-column>
			<el-table-column prop="name" label="音乐名称">
			</el-table-column>
			<el-table-column prop="music" label="歌曲">

				<template slot-scope='scope'>
					<!-- 使用audio标签来实现音频播放 -->
					<audio controls style="width: 220px;" :key="scope.row.music">
						<source :src="url + 'downLoad?filename=' + scope.row.music" />
					</audio>
				</template>

			</el-table-column>
			<el-table-column prop="img" label="音乐封面">
				<template slot-scope='scope'>
					<el-image style="width: 100px; height: 100px"
						:src="url + 'downLoad?filename=' + scope.row.img"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-button type="primary" icon="el-icon-edit" size="mini"
						@click="toEditArticle(scope.row)">修改</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini"
						@click="deleteArticle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页区域 -->
		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>


		<!-- 新增和修改的对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
			<el-form :model="fm">
				<el-form-item label="音乐名称" label-width="80px">
					<el-input placeholder="请输入音乐名称" v-model="fm.name"></el-input>
				</el-form-item>

				<el-form-item label="动态音频" label-width="80px">
					<!-- <el-input placeholder="请输入动态音频" v-model="fm.music"></el-input> -->
					<el-upload :action="url + 'upload'" :file-list="musicList" :on-success="handleMusicSuccess" :limit="1"
						:on-remove="handleMusicRemove">
						<el-button size="small" type="primary">点击上传</el-button>
					</el-upload>
				</el-form-item>

				<el-form-item label="音乐封面" label-width="80px">

					<!-- 
							 el-upload:上传组件
								action： 选中图片时上传的接口
								list-type：上传组件类型
								on-preview ： 图片预览事件
								on-remove ：移除图片事件
								el-dialog : 预览图片组件
								on-success : 上传成功后的回调函数
								limit  ：  限制上传图片个数
								file-list: 用来展示图片路径的数组 
						-->
					<el-upload :action="url + 'upload'" list-type="picture-card" :file-list="fileList"
						:on-success="handleSuccess" :limit="1" :on-preview="handlePictureCardPreview"
						:on-remove="handleRemove">
						<i class="el-icon-plus"></i>
					</el-upload>
					<!-- 预览图片 -->
					<el-dialog :visible.sync="dialogVisible">
						<img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>



			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="addMusic">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>

<script>
import { url } from "@/util/tools.js";
export default {
	data() {
		return {
			// 查询信息对象
			queryInfo: {
				name: '',
				pageNum: 1,
				pageSize: 5
			},
			total: 183,
			fmList: [],
			title: '', // 对话框标题
			dialogFormVisible: false, // 是否显示对话框
			fm: { // 文章对象
				"id": '',
				"name": "",
				"music": "",
				"img": "",
			},
			dialogImageUrl: '', // 预览图片路径
			dialogVisible: false, // 预览图片的对话框
			fileList: [],
			musicList: [],
		}
	},
	methods: {
		// 音频
		// 处理上传成功的函数
		handleMusicSuccess(response) {
			// 把上传后的图片路径，交给文章对象的img
			this.fm.music = response.message;
		},

		// 删除文件的事件
		handleMusicRemove(file, fileList) {
			// console.log(file, fileList);
			// 移除数据
			this.fm.music = '';
		},

		// 音乐封面
		// 进入添加的对话框
		toAddMusic() {
			this.title = "新增音乐";
			this.dialogFormVisible = true;
		},

		// 处理上传成功的函数
		handleSuccess(response) {
			// 把上传后的图片路径，交给文章对象的img
			this.fm.img = response.message;
		},

		// 删除图片的事件
		handleRemove(file, fileList) {
			// console.log(file, fileList);
			// 移除数据
			this.fm.img = '';
		},

		// 预览图片事件
		handlePictureCardPreview(file) {
			this.dialogImageUrl = file.url;
			this.dialogVisible = true;
		},

		// 删除
		deleteArticle(id) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http.delete('music/' + id)
						.then(resp => {
							if (resp.data.status == 200) {
								this.$message.success(resp.data.message)
								this.queryList()
							} else {
								this.$message.error(resp.data.message)
							}
						})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},

		// 进入修改的预览数据页面
		toEditArticle(row) {
			//console.log(row)
			// 赋值
			this.fm = row;
			// 设置标题
			this.title = "修改";
			// 开启对话框
			this.dialogFormVisible = true;
			// 动态的获取图片的名称并帮到到fileList
			this.fileList = [{
				name: row.img,
				url: url + 'downLoad?filename=' + row.img
			}];
			this.musicList = [{
				name: row.music,
				url: url + 'downLoad?filename=' + row.music
			}];
		},

		// 取消对话框
		cancle() {
			this.dialogFormVisible = false;
			this.fm = { // 文章对象
				"id": '',
				"name": "",
				"music": "",
				"img": "",
			},
				this.fileList = [];
			this.musicList = [];
		},

		// 添加
		addMusic() {
			if (this.fm.id) { // 有值为true  修改
				this.$http.put("music", this.fm)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('修改成功！');
							// 清空数据
							this.fm = { // 文章对象
								"id": '',
								"name": "",
								"music": "",
								"img": "",
							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
						} else {
							this.$message.error('接口异常！')
						}
					})

			} else {
				this.$http.post("music", this.fm)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('添加成功！');
							// 清空数据
							this.fm = { // 文章对象
								"id": '',
								"name": "",
								"music": "",
								"img": "",
							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
						} else {
							this.$message.error('接口异常！')
						}
					})
			}
			//  在取消函数，添加成功， 修改成功的函数中加入以下代码实现图片的清空
			this.fileList = [],
				this.musicList = []
			// this.queryList()
		},

		// 分页查询信息的方法
		queryList() {
			// 调用后端接口来获取数据
			this.$http.get('music/findByPage', {
				params: this.queryInfo
			})
				.then(resp => {
					if (resp.data.status == 200) {
						// console.log(resp.data)
						this.fmList = resp.data.data.list;
						this.total = resp.data.data.total;
						// console.log(this.fmList)
					} else {
						this.$message.error('查询失败！')
					}
				})
		},
		handleSizeChange(size) {
			//console.log('每页显示数量发生改变');
			this.queryInfo.pageSize = size;
			this.queryInfo.pageNum = 1;
			// 重新查询
			this.queryList()
		},
		handleCurrentChange(num) {
			//console.log('页码发生改变');
			this.queryInfo.pageNum = num;
			// 重新查询
			this.queryList();
		}
	},
	mounted() {
		this.queryList();
		// 动态的获取tool.js中的url，并赋值给当前组件的全局url
		this.url = url;
	}
}
</script>

<style>
.el-breadcrumb {
	margin-bottom: 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ddd;
}

.el-pagination {
	margin-top: 15px;
}

.el-link {
	padding: 0 5px;
}

/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
	min-height: 200px;
}
</style>